<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>批量生成二维码</title>
    <!--base th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'}" /-->
    <link type="text/css" rel="stylesheet" th:href="@{/static/qrcodes.css}" />
    <link rel="stylesheet" th:href="@{/static/bootstrap-select/dist/css/bootstrap-select.min.css}">
    <link rel="stylesheet" th:href="@{/static/table/bootstrap.min.css}">
    <script th:src="@{/static/jquery3.js}"></script>
    <script th:src="@{/static/jquery-form.js}"></script>
    <script th:src="@{/static/commonUtil.js}"></script>
    <link type="text/css" rel="stylesheet" th:href="@{/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}" />
    <script th:src="@{/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/static/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
    <script th:src="@{/static/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/bootstrap-select/dist/js/i18n/defaults-zh_CN.min.js}"></script>
    <script th:src="@{/static/bootstrap-select/dist/js/bootstrap-select.min.js}"></script>


    <style>
        #productNo_div .btn-default {
            width: 200px !important;
            height: 30px !important;
            border-radius: 6px !important;
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #0b6cbc !important;
        }
    </style>


    <script type="text/javascript">




        $(function() {
            $('#datetimepicker').datetimepicker(
                {
                    bootcssVer:3,
                    language:  'zh-CN',
                    minView:0,
                    todayBtn : true,
                    autoclose:true,
                    minuteStep:1,
                    format:'yyyy-mm-dd hh:ii',
                    //pickerPosition:'top-right'//日期插件弹出的位置
                });



            $.ajax({
                // get请求地址
                url: "[[${#request.getContextPath()}]]/product/findAllProduct",
                dataType: "json",
                success: function (data) {
                    $('#productNo').append("<option>请选择</option>")
                    for (var i = 0; i < data.length; i++) {
                        $('#productNo').append("<option value=" + data[i].productId + ">" + data[i].productId+"---" +data[i].productName + "</option>");
                    }
                    var productNoTemp=$("#productNoTemp").val();
                    console.log("productNoTemp:"+productNoTemp)
                    if(productNoTemp != null && productNoTemp != ''){
                        $('#productNo').selectpicker('val', productNoTemp).trigger("change");;
                    }

                    // 缺一不可
                    $('#productNo').selectpicker('refresh');
                    $('#productNo').selectpicker('render');
                }
            });
        })


        $(document).ready(function() {
          /*  var excelUrl = $("#excelUrl").val();
            if(excelUrl != null && excelUrl != ""){
                downLoad();
            }*/

            //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
          /*  $("#codesForm :input.required").each(function () {
                //通过jquery api：$("HTML字符串") 创建jquery对象
                var $required = $("<span><strong style='color:red;display:inline-block'>*</strong></span>");
                //添加到this对象的父级对象下
                $(this).parent().append($required);
            });*/

            $("#backButton").click(function(){
                window.location.href='[[${#request.getContextPath()}]]/qrcode/toQrCoderList';
            })




            $("#codesButton").click(function () {
                var valid = true;

                $("#codesForm :input.required").each(function () {
                    var val = $.trim($(this).val());
                    if (val.length == 0){
                        label = $(this).parent().prev().html();
                        alert(label+"不能为空！");
                        $(this).focus();
                        valid = false;
                        return false;
                    }
                });
                if(!valid) return false;
                productNoVal = $.trim($("#productNo").val());
                regex = /^69[0-9]{11}$/g;
                var matchResult = regex.test(productNoVal);
                if(!matchResult){
                    alert("请输入合法的商品编号，必须是13位数字且以69开头！");
                    $("#productNo").focus();
                    valid = false;
                    return false;
                }
               /* produceNoVal = $.trim($("#produceNo").val());
                //regex = /^[a-zA-Z0-9]{6}$/g;
                regex = /^[A-Z]{3}[0-9]{3}$/g;
                var matchResult = regex.test(produceNoVal);
                if(!matchResult){
                    alert("请输入6位的生产批次！三位字母+三位数字！");
                    $("#produceNo").focus();
                    valid = false;
                    return false;
                }*/

                var unitNums = $("#unitNum").text().split("*");
                var inputs = $("#unitNum input");
                var unitNumVal = "";
                for(var i = 0 ; i < unitNums.length; i ++){
                    //unitNumVal += $(inputs[i]).val()+unitNums[i]+"*"
                    value=$(inputs[i]).val();
                    if(value==0){
                        continue;
                    }
                    unitNumVal += value+unitNums[i]+"*"
                }
                unitNumVal = unitNumVal.substr(0,unitNumVal.length-1);
                $("#packHierQuant").val(unitNumVal);

                //packHierQuant = $.trim($("#packHierQuant").val());
                packHierQuant=$("#packHierQuant").val();
                packHierQuant= packHierQuant.replace(/\s+/g, "");
                console.log("箱盒："+packHierQuant);
                regex = /^([0-9]+[\u4e00-\u9fa5]+)+(\*[0-9]+[\u4e00-\u9fa5]+)*$/g;
                var matchResult = regex.test(packHierQuant);
                if(!matchResult){
                    alert("请按照格式要求输入包装层级与数量！\n 例如：100箱*8盒*10包");
                    $("#unitLevel").focus();
                    valid = false;
                    return false;
                }
                var waitingGif = '[[${#request.getContextPath()}]]/static/wait.gif';
                $("#downloadDiv").empty();
                $("#downloadDiv").html('<div class="menu">下载二维码:</div><div class="kong"><img src="'+waitingGif+'" width="100px" height="100px"></div>');
                $("#downloadDiv").show();
                $("#codesForm").ajaxSubmit({
                    type : 'POST',
                    timeout : 0,
                    success : function(result) {
                        if(result.success=='yes'){
                            // alert(result.message);
                            $("#downloadDiv").empty();
                            var downloadUrl = '[[${#request.getContextPath()}]]/qrcode/downloadCodes?filename=' + result.filename;
                            $("#downloadDiv").html('<div class="menu">下载二维码:</div><div class="kong" style="width:100px;"><a href="'+
                                downloadUrl+'">下 载</a></div>');
                            $("#downloadDiv").show();
                        // }else{
                            // alert(result.message);
                            $("#myModal").modal('hide');
                        }
                    },
                    error : function(xhr,stateCode,err) {
                        // alert(xhr.responseText);
                        // alert(stateCode);
                        // alert(err);
                        //$("#downloadDiv").empty();
                       // $("#downloadDiv").html('<div class="menu">下载二维码:</div><div class="kong" style="width:100px;">二维码程序报错</div>');
                       // alert("生成二维码程序报错！");
                    }
                });
                $("#myModal").modal('show');
            });

            $("#btn_toList").click(function(){
                window.location.href="[[${#request.getContextPath()}]]/qrcode/toQrCoderList";
            })

        });

       /* function downLoad(){
            var excelUrl=$("#excelUrl").val();
            $("#downloadDiv").empty();
            var downloadUrl = '[[${#request.getContextPath()}]]/qrcode/downloadCodes?filename=' + excelUrl;
            $("#downloadDiv").html('<div class="menu">下载二维码:</div><div class="kong" style="width:100px;"><a href="'+
                downloadUrl+'">下 载</a></div>');
            $("#downloadDiv").show();
        }*/
    </script>
    <script>
        function changeUnit(thiz){
            var val = $(thiz).val() - 0;
            switch (val) {
                case 1 :
                    $("#unitNum").html('<input type="text" width="20px"/>箱*<input type="text" width="20px"/>盒*<input type="text" width="20px"/>包');
                    break;
                case 2 :
                    $("#unitNum").html('<input type="text" width="20px"/>箱*<input type="text" width="20px"/>盒');
                    break;
                case 3 :
                    $("#unitNum").html('<input type="text" width="20px"/>盒*<input type="text" width="20px"/>包');
                    break;
                case 4 :
                    $("#unitNum").html('<input type="text" width="20px"/>箱');
                    break;
                case 5 :
                    $("#unitNum").html('<input type="text" width="20px"/>盒');
                    break;
                case 6 :
                    $("#unitNum").html('<input type="text" width="20px"/>包');
                    break;
                default:
                    $("#unitNum").html('');
                    alert("请选择！")
                    break;
            }
            $("#packHierQuant").val(val);
        }
    </script>
</head>
<body id="i88" style="margin: 0">

<div class = "pg_header">
    <span class="pg_dl" id="i77" th:align="center">生成二维码信息</span>
</div>
<form name="codesForm" id="codesForm" th:action="@{/qrcode/genCodes}" method="post">
    <div class="left"></div>
    <div class="pg_body" style="margin-top: 100px">
        <div class="menu">生成编号:</div>
        <div class="kong" style="width:200px;">
            <input class="required" type="text" th:value="${qrCode.productBatch}" name="enterBatch" readonly="readonly">
        </div>
       <!-- <div class="menu">产品生成时间:</div>
        <div class="kong">
            <input   id="datetimepicker" class="required" type="text" th:value="${qrCode.productTimeStr}" name="productTime"  autocomplete="off">
        </div>-->
        <div class="menu">产品编号:</div>
        <div class="kong" id="productNo_div">
           <!-- <input  id="productNo" class="required" type="text" th:value="${qrCode.productId}" name="itemNo" placeholder="以69开头的13位数字">-->
            <select  onkeyup="this.value=this.value.replace(/[, ]/g,'')"id="productNo" class="required"  name="itemNo" data-live-search="true" aria-describedby="basic-addon7"></select>
        </div>
       <!-- <div class="menu">生产环境:</div>
        <div class="kong">
            <input onkeyup="this.value=this.value.replace(/[, ]/g,'')" id="text2" class="required" type="text" th:value="${qrCode.productEnvironment}" name="environment">
        </div>
        <div class="menu">原料批次:</div>
        <div class="kong">
            <input onkeyup="this.value=this.value.replace(/[, ]/g,'')" id="text3" class="required" type="text" th:value="${qrCode.materialBatch}" name="materialBatch" >
        </div>-->
        <div class="menu">包装层级:</div>
        <div class="kong">
            <input id="packHierQuant" style="display: none"  type="text" name="packHierQuant">
            <select class="required" id="unitLevel"  name="unit" onchange="changeUnit(this);" aria-describedby="basic-addon7">
                <option value="0">请选择</option>
                <option value="1">箱*盒*包</option>
                <option value="2">箱*盒</option>
                <option value="3">盒*包</option>
                <option value="4">箱</option>
                <option value="5">盒</option>
                <option value="6">包</option>
            </select>


            <span id="unitNum">
                 <div th:if="${qrCode.qrcodeId != null}">
                    <input type="text" width="20px" th:value="${qrCode.caseNum}"/>箱*<input type="text" width="20px" th:value="${qrCode.boxNum}"/>盒*<input type="text" width="20px" th:value="${qrCode.packageNum}"/>包
                </div>
            </span>
        </div>

        <div id="downloadDiv" style="display: none;">
            <div class="menu">下载二维码:</div>
            <div class="kong">
                <img th:src="@{/static/wait.gif}" width="100px" height="100px">
            </div>
        </div>
        <input type="hidden" th:value="${qrCode.excelUrl}" id="excelUrl">
        <input type="hidden" th:value="${qrCode.qrcodeId}" id="qrcodeId" name="qrcodeId">
        <input type="hidden" th:value="${qrCode.productId}" id="productNoTemp" name="productNoTemp">

    </div>
    <br/>
    <div style="margin-left: 180px;float:left;padding: 15px;">
        <input id="codesButton" type="button" name="002" value="生  成" class="btn btn-primary">
        <input id="backButton" type="button" name="003" value="返  回" class="btn btn-default">
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        操作提示
                    </h4>
                </div>
                <div class="modal-body">
                    二维码正在生成中，是否继续等待
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">是
                    </button>
                    <button type="button" class="btn btn-primary" id="btn_toList">
                        否
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</form>
</body>
</html>